#ifndef HHTML__H
#define HHTML__H

// 登录页面HTML - 使用现代CSS样式
static const char *login_html = 
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"  <meta charset=\"UTF-8\">"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"  <title>登录</title>"
"  <style>"
"    * {"
"      box-sizing: border-box;"
"      margin: 0;"
"      padding: 0;"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
"    }"
"    body {"
"      display: flex;"
"      justify-content: center;"
"      align-items: center;"
"      min-height: 100vh;"
"      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);"
"      padding: 20px;"
"    }"
"    .container {"
"      background-color: white;"
"      border-radius: 10px;"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);"
"      padding: 40px;"
"      width: 100%;"
"      max-width: 450px;"
"      text-align: center;"
"    }"
"    h1 {"
"      color: #333;"
"      margin-bottom: 30px;"
"      font-weight: 600;"
"    }"
"    .form-group {"
"      margin-bottom: 20px;"
"      text-align: left;"
"    }"
"    label {"
"      display: block;"
"      margin-bottom: 8px;"
"      color: #555;"
"      font-weight: 500;"
"    }"
"    input[type=\"text\"],"
"    input[type=\"password\"] {"
"      width: 100%;"
"      padding: 12px 15px;"
"      border: 1px solid #ddd;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      transition: border-color 0.3s;"
"    }"
"    input[type=\"text\"]:focus,"
"    input[type=\"password\"]:focus {"
"      border-color: #2575fc;"
"      outline: none;"
"      box-shadow: 0 0 0 2px rgba(37, 117, 252, 0.2);"
"    }"
"    button {"
"      width: 100%;"
"      padding: 12px;"
"      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);"
"      color: white;"
"      border: none;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      font-weight: 600;"
"      cursor: pointer;"
"      transition: transform 0.2s, box-shadow 0.2s;"
"    }"
"    button:hover {"
"      transform: translateY(-2px);"
"      box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);"
"    }"
"    .footer {"
"      margin-top: 25px;"
"      color: #777;"
"      font-size: 14px;"
"    }"
"  </style>"
"</head>"
"<body>"
"  <div class=\"container\">"
"    <h1>欢迎回来</h1>"
"    <form action=\"/login_in\" method=\"post\">"
"      <div class=\"form-group\">"
"        <label for=\"username\">用户名</label>"
"        <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"输入用户名\" required>"
"      </div>"
"      <div class=\"form-group\">"
"        <label for=\"password\">密码</label>"
"        <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"输入密码\" required>"
"      </div>"
"      <button type=\"submit\">登录</button>"
"    </form>"
"    <div class=\"footer\">"
"      <p>@inori</p>"
"    </div>"
"  </div>"
"</body>"
"</html>";

// 登录成功页面
static const char *success_html = 
"<!DOCTYPE html>\n"  
"<html lang=\"en\">\n"
"<head>\n"
"  <meta charset=\"UTF-8\">\n"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n"
"  <title>登录成功</title>\n"
"  <style>\n"
"    * {\n"
"      box-sizing: border-box;\n"
"      margin: 0;\n"
"      padding: 0;\n"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n"
"    }\n"
"    body {\n"
"      display: flex;\n"
"      justify-content: center;\n"
"      align-items: center;\n"
"      min-height: 100vh;\n"
"      background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);\n"
"      padding: 20px;\n"
"    }\n"
"    .container {\n"
"      background-color: white;\n"
"      border-radius: 10px;\n"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\n"
"      padding: 40px;\n"
"      width: 100%;\n"
"      max-width: 500px;\n"
"      text-align: center;\n"
"    }\n"
"    .success-icon {\n"
"      font-size: 72px;\n"
"      color: #28a745;\n"
"      margin-bottom: 20px;\n"
"    }\n"
"    h1 {\n"
"      color: #333;\n"
"      margin-bottom: 20px;\n"
"      font-weight: 600;\n"
"    }\n"
"    p {\n"
"      color: #555;\n"
"      font-size: 18px;\n"
"      margin-bottom: 15px;\n"
"    }\n"
"    .welcome {\n"
"      font-size: 22px;\n"
"      font-weight: 500;\n"
"      color: #2c3e50;\n"
"      margin: 25px 0;\n"
"    }\n"
"    .countdown {\n"
"      color: #28a745;\n"
"      font-weight: 600;\n"
"    }\n"
"    .btn {\n"
"      display: inline-block;\n"
"      padding: 12px 30px;\n"
"      background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);\n"
"      color: white;\n"
"      text-decoration: none;\n"
"      border-radius: 5px;\n"
"      font-size: 16px;\n"
"      font-weight: 600;\n"
"      transition: transform 0.2s, box-shadow 0.2s;\n"
"      margin-top: 10px;\n"
"    }\n"
"    .btn:hover {\n"
"      transform: translateY(-2px);\n"
"      box-shadow: 0 5px 15px rgba(0, 176, 155, 0.4);\n"
"    }\n"
"  </style>\n"
"</head>\n"
"<body>\n"
"  <div class=\"container\">\n"
"    <div class=\"success-icon\">✓</div>\n"
"    <h1>登录成功!</h1>\n"
"    <div class=\"welcome\">欢迎回来, %s!</div>\n"
"    <p>您已在EPFC登录成功.</p>\n"
"    <p>将在 <span class=\"countdown\" id=\"countdown\">3</span> 秒后自动跳转...</p>\n"
"    <a href=\"/\" class=\"btn\">立即跳转到首页</a>\n"
"  </div>\n"
"  <script>\n"
"    let seconds = 3;\n"
"    const countdownElement = document.getElementById(\"countdown\");\n"
"    const countdownInterval = setInterval(() => {\n"
"      seconds--;\n"
"      countdownElement.textContent = seconds;\n"
"      if (seconds <= 0) {\n"
"        clearInterval(countdownInterval);\n"
"        window.location.href = \"/\";\n"
"      }\n"
"    }, 1000);\n"
"  </script>\n"
"</body>\n"
"</html>";

// 登录失败页面
static const char *failure_html = 
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"  <meta charset=\"UTF-8\">"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"  <title>登录失败</title>"
"  <style>"
"    * {"
"      box-sizing: border-box;"
"      margin: 0;"
"      padding: 0;"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
"    }"
"    body {"
"      display: flex;"
"      justify-content: center;"
"      align-items: center;"
"      min-height: 100vh;"
"      background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);"
"      padding: 20px;"
"    }"
"    .container {"
"      background-color: white;"
"      border-radius: 10px;"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);"
"      padding: 40px;"
"      width: 100%;"
"      max-width: 500px;"
"      text-align: center;"
"    }"
"    .error-icon {"
"      font-size: 72px;"
"      color: #dc3545;"
"      margin-bottom: 20px;"
"    }"
"    h1 {"
"      color: #333;"
"      margin-bottom: 20px;"
"      font-weight: 600;"
"    }"
"    p {"
"      color: #555;"
"      font-size: 18px;"
"      margin-bottom: 30px;"
"    }"
"    .btn {"
"      display: inline-block;"
"      padding: 12px 30px;"
"      background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);"
"      color: white;"
"      text-decoration: none;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      font-weight: 600;"
"      transition: transform 0.2s, box-shadow 0.2s;"
"    }"
"    .btn:hover {"
"      transform: translateY(-2px);"
"      box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);"
"    }"
"  </style>"
"</head>"
"<body>"
"  <div class=\"container\">"
"    <div class=\"error-icon\">✗</div>"
"    <h1>登录失败</h1>"
"    <p>检查您的用户名是否正确，或者重新输入密码注意大小写</p>"
"    <a href=\"/\" class=\"btn\">重试</a>"
"  </div>"
"</body>"
"</html>";

// 404页面
static const char *not_found_html = 
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"  <meta charset=\"UTF-8\">"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"  <title>Page Not Found</title>"
"  <style>"
"    * {"
"      box-sizing: border-box;"
"      margin: 0;"
"      padding: 0;"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
"    }"
"    body {"
"      display: flex;"
"      justify-content: center;"
"      align-items: center;"
"      min-height: 100vh;"
"      background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);"
"      padding: 20px;"
"    }"
"    .container {"
"      background-color: white;"
"      border-radius: 10px;"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);"
"      padding: 40px;"
"      width: 100%;"
"      max-width: 500px;"
"      text-align: center;"
"    }"
"    .error-code {"
"      font-size: 120px;"
"      font-weight: 700;"
"      color: #5c6bc0;"
"      margin-bottom: 10px;"
"      line-height: 1;"
"    }"
"    h1 {"
"      color: #333;"
"      margin-bottom: 20px;"
"      font-weight: 600;"
"    }"
"    p {"
"      color: #555;"
"      font-size: 18px;"
"      margin-bottom: 30px;"
"    }"
"    .btn {"
"      display: inline-block;"
"      padding: 12px 30px;"
"      background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);"
"      color: white;"
"      text-decoration: none;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      font-weight: 600;"
"      transition: transform 0.2s, box-shadow 0.2s;"
"    }"
"    .btn:hover {"
"      transform: translateY(-2px);"
"      box-shadow: 0 5px 15px rgba(92, 107, 192, 0.4);"
"    }"
"  </style>"
"</head>"
"<body>"
"  <div class=\"container\">"
"    <div class=\"error-code\">404</div>"
"    <h1>Page Not Found</h1>"
"    <p>The requested resource could not be found on this server.</p>"
"    <a href=\"/\" class=\"btn\">Go to Homepage</a>"
"  </div>"
"</body>"
"</html>";


const char* html_content = 
"<html lang='zh-CN'>\n"
"<head>\n"
"    <meta charset='UTF-8'>\n"
"    <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n"
"    <title>企业解决方案平台</title>\n"
"    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>\n"
"    <style>\n"
"        * {\n"
"            margin: 0;\n"
"            padding: 0;\n"
"            box-sizing: border-box;\n"
"            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n"
"        }\n"
"\n"
"        body {\n"
"            background-color: #f5f7fa;\n"
"        }\n"
"\n"
"        .navbar {\n"
"            position: fixed;\n"
"            top: 0;\n"
"            width: 100%;\n"
"            background: #fff;\n"
"            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n"
"            z-index: 1000;\n"
"            display: flex;\n"
"            justify-content: space-between;\n"
"            align-items: center;\n"
"            padding: 1rem 5%;\n"
"        }\n"
"\n"
"        .logo {\n"
"            font-size: 1.8rem;\n"
"            font-weight: bold;\n"
"            color: #2c3e50;\n"
"            display: flex;\n"
"            align-items: center;\n"
"        }\n"
"\n"
"        .logo i {\n"
"            margin-right: 10px;\n"
"            color: #3498db;\n"
"        }\n"
"\n"
"        .nav-links {\n"
"            list-style: none;\n"
"            display: flex;\n"
"            gap: 2rem;\n"
"        }\n"
"\n"
"        .nav-links a {\n"
"            text-decoration: none;\n"
"            color: #555;\n"
"            font-weight: 500;\n"
"            transition: color 0.3s;\n"
"            padding: 8px 12px;\n"
"            border-radius: 4px;\n"
"        }\n"
"\n"
"        .nav-links a:hover {\n"
"            color: #2c3e50;\n"
"            background: #f0f7ff;\n"
"        }\n"
"\n"
"        .auth-buttons {\n"
"            display: flex;\n"
"            gap: 1rem;\n"
"            align-items: center;\n"
"        }\n"
"\n"
"        .btn {\n"
"            padding: 0.7rem 1.5rem;\n"
"            border-radius: 25px;\n"
"            font-weight: 500;\n"
"            cursor: pointer;\n"
"            transition: all 0.3s;\n"
"            border: none;\n"
"            font-size: 1rem;\n"
"        }\n"
"\n"
"        .login-btn {\n"
"            background: transparent;\n"
"            color: #3498db;\n"
"            border: 1px solid #3498db;\n"
"        }\n"
"\n"
"        .login-btn:hover {\n"
"            background: #3498db;\n"
"            color: white;\n"
"        }\n"
"\n"
"        .signup-btn {\n"
"            background: #3498db;\n"
"            color: white;\n"
"        }\n"
"\n"
"        .signup-btn:hover {\n"
"            background: #2980b9;\n"
"            transform: translateY(-2px);\n"
"        }\n"
"\n"
"        .user-info {\n"
"            display: flex;\n"
"            align-items: center;\n"
"            gap: 10px;\n"
"            background: #f0f7ff;\n"
"            padding: 8px 15px;\n"
"            border-radius: 25px;\n"
"            color: #2c3e50;\n"
"        }\n"
"\n"
"        .user-info img {\n"
"            width: 32px;\n"
"            height: 32px;\n"
"            border-radius: 50%;\n"
"            object-fit: cover;\n"
"        }\n"
"\n"
"        .hamburger {\n"
"            display: none;\n"
"            font-size: 1.5rem;\n"
"            cursor: pointer;\n"
"            color: #333;\n"
"        }\n"
"\n"
"        /* 英雄区域 */\n"
"        .hero {\n"
"            height: 100vh;\n"
"            background: linear-gradient(135deg, rgba(44,62,80,0.9), rgba(52,152,219,0.8)), \n"
"                        url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop') center/cover;\n"
"            display: flex;\n"
"            align-items: center;\n"
"            justify-content: center;\n"
"            text-align: center;\n"
"            color: white;\n"
"            padding: 0 2rem;\n"
"        }\n"
"\n"
"        .hero-content {\n"
"            max-width: 800px;\n"
"        }\n"
"\n"
"        .hero-content h1 {\n"
"            font-size: 3.5rem;\n"
"            margin-bottom: 1.5rem;\n"
"            line-height: 1.2;\n"
"            text-shadow: 0 2px 10px rgba(0,0,0,0.2);\n"
"        }\n"
"\n"
"        .hero-content p {\n"
"            font-size: 1.4rem;\n"
"            margin-bottom: 2rem;\n"
"            opacity: 0.9;\n"
"        }\n"
"\n"
"        .cta-button {\n"
"            display: inline-block;\n"
"            padding: 1rem 2.5rem;\n"
"            background: #e74c3c;\n"
"            color: white;\n"
"            text-decoration: none;\n"
"            border-radius: 30px;\n"
"            font-size: 1.1rem;\n"
"            transition: all 0.3s;\n"
"            font-weight: 600;\n"
"            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);\n"
"        }\n"
"\n"
"        .cta-button:hover {\n"
"            transform: translateY(-5px);\n"
"            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);\n"
"            background: #c0392b;\n"
"        }\n"
"\n"
"        /* 特色功能区 */\n"
"        .section-title {\n"
"            text-align: center;\n"
"            margin-bottom: 3rem;\n"
"        }\n"
"\n"
"        .section-title h2 {\n"
"            font-size: 2.5rem;\n"
"            color: #2c3e50;\n"
"            position: relative;\n"
"            display: inline-block;\n"
"            padding-bottom: 15px;\n"
"        }\n"
"\n"
"        .section-title h2:after {\n"
"            content: '';\n"
"            position: absolute;\n"
"            bottom: 0;\n"
"            left: 50%;\n"
"            transform: translateX(-50%);\n"
"            width: 80px;\n"
"            height: 4px;\n"
"            background: #3498db;\n"
"            border-radius: 2px;\n"
"        }\n"
"\n"
"        .features {\n"
"            padding: 6rem 2rem;\n"
"            background: #fff;\n"
"        }\n"
"\n"
"        .feature-grid {\n"
"            max-width: 1200px;\n"
"            margin: 0 auto;\n"
"            display: grid;\n"
"            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n"
"            gap: 2.5rem;\n"
"        }\n"
"\n"
"        .feature-card {\n"
"            background: white;\n"
"            padding: 2.5rem 2rem;\n"
"            border-radius: 15px;\n"
"            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n"
"            text-align: center;\n"
"            transition: transform 0.3s, box-shadow 0.3s;\n"
"        }\n"
"\n"
"        .feature-card:hover {\n"
"            transform: translateY(-10px);\n"
"            box-shadow: 0 15px 40px rgba(0,0,0,0.12);\n"
"        }\n"
"\n"
"        .feature-card i {\n"
"            font-size: 3.5rem;\n"
"            color: #3498db;\n"
"            margin-bottom: 1.5rem;\n"
"        }\n"
"\n"
"        .feature-card h3 {\n"
"            font-size: 1.5rem;\n"
"            margin-bottom: 1rem;\n"
"            color: #2c3e50;\n"
"        }\n"
"\n"
"        .feature-card p {\n"
"            color: #666;\n"
"            line-height: 1.6;\n"
"        }\n"
"\n"
"        /* 服务介绍区 */\n"
"        .services {\n"
"            padding: 6rem 2rem;\n"
"            background: #f8f9fa;\n"
"        }\n"
"\n"
"        .service-grid {\n"
"            max-width: 1200px;\n"
"            margin: 0 auto;\n"
"            display: grid;\n"
"            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n"
"            gap: 2.5rem;\n"
"        }\n"
"\n"
"        .service-card {\n"
"            background: white;\n"
"            border-radius: 15px;\n"
"            overflow: hidden;\n"
"            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n"
"            transition: transform 0.3s;\n"
"        }\n"
"\n"
"        .service-card:hover {\n"
"            transform: translateY(-10px);\n"
"        }\n"
"\n"
"        .service-img {\n"
"            height: 200px;\n"
"            background-size: cover;\n"
"            background-position: center;\n"
"        }\n"
"\n"
"        .service-content {\n"
"            padding: 2rem;\n"
"        }\n"
"\n"
"        .service-content h3 {\n"
"            font-size: 1.5rem;\n"
"            margin-bottom: 1rem;\n"
"            color: #2c3e50;\n"
"        }\n"
"\n"
"        .service-content p {\n"
"            color: #666;\n"
"            line-height: 1.6;\n"
"            margin-bottom: 1.5rem;\n"
"        }\n"
"\n"
"        .service-link {\n"
"            display: inline-block;\n"
"            color: #3498db;\n"
"            text-decoration: none;\n"
"            font-weight: 600;\n"
"            transition: color 0.3s;\n"
"        }\n"
"\n"
"        .service-link:hover {\n"
"            color: #2980b9;\n"
"        }\n"
"\n"
"        /* 联系表单区 */\n"
"        .contact {\n"
"            padding: 6rem 2rem;\n"
"            background: linear-gradient(135deg, #2c3e50, #1a2530);\n"
"            color: white;\n"
"        }\n"
"\n"
"        .contact-container {\n"
"            max-width: 800px;\n"
"            margin: 0 auto;\n"
"        }\n"
"\n"
"        .contact-form {\n"
"            display: grid;\n"
"            grid-template-columns: 1fr;\n"
"            gap: 1.5rem;\n"
"        }\n"
"\n"
"        input, textarea {\n"
"            padding: 1rem;\n"
"            border: none;\n"
"            border-radius: 8px;\n"
"            font-size: 1rem;\n"
"            background: rgba(255,255,255,0.1);\n"
"            color: white;\n"
"        }\n"
"\n"
"        input::placeholder, textarea::placeholder {\n"
"            color: rgba(255,255,255,0.7);\n"
"        }\n"
"\n"
"        button[type='submit'] {\n"
"            padding: 1rem 2rem;\n"
"            background: #3498db;\n"
"            color: white;\n"
"            border: none;\n"
"            border-radius: 30px;\n"
"            cursor: pointer;\n"
"            transition: background 0.3s;\n"
"            font-weight: 600;\n"
"            font-size: 1.1rem;\n"
"            margin-top: 1rem;\n"
"        }\n"
"\n"
"        button[type='submit']:hover {\n"
"            background: #2980b9;\n"
"        }\n"
"\n"
"        /* 登录模态框 */\n"
"        .modal {\n"
"            display: none;\n"
"            position: fixed;\n"
"            top: 0;\n"
"            left: 0;\n"
"            width: 100%;\n"
"            height: 100%;\n"
"            background: rgba(0,0,0,0.7);\n"
"            z-index: 2000;\n"
"            justify-content: center;\n"
"            align-items: center;\n"
"        }\n"
"\n"
"        .modal-content {\n"
"            background: white;\n"
"            border-radius: 15px;\n"
"            width: 90%;\n"
"            max-width: 450px;\n"
"            overflow: hidden;\n"
"            box-shadow: 0 20px 50px rgba(0,0,0,0.3);\n"
"            animation: modalAppear 0.4s ease-out;\n"
"        }\n"
"\n"
"        @keyframes modalAppear {\n"
"            from { transform: translateY(-50px); opacity: 0; }\n"
"            to { transform: translateY(0); opacity: 1; }\n"
"        }\n"
"\n"
"        .modal-header {\n"
"            background: #3498db;\n"
"            color: white;\n"
"            padding: 1.5rem;\n"
"            text-align: center;\n"
"            position: relative;\n"
"        }\n"
"\n"
"        .close-modal {\n"
"            position: absolute;\n"
"            top: 1rem;\n"
"            right: 1.5rem;\n"
"            font-size: 1.5rem;\n"
"            cursor: pointer;\n"
"            transition: transform 0.3s;\n"
"        }\n"
"\n"
"        .close-modal:hover {\n"
"            transform: rotate(90deg);\n"
"        }\n"
"\n"
"        .modal-body {\n"
"            padding: 2rem;\n"
"        }\n"
"\n"
"        .form-group {\n"
"            margin-bottom: 1.5rem;\n"
"        }\n"
"\n"
"        .form-group label {\n"
"            display: block;\n"
"            margin-bottom: 0.5rem;\n"
"            color: #555;\n"
"            font-weight: 500;\n"
"        }\n"
"\n"
"        .form-group input {\n"
"            width: 100%;\n"
"            padding: 0.8rem 1rem;\n"
"            border: 1px solid #ddd;\n"
"            border-radius: 8px;\n"
"            font-size: 1rem;\n"
"            color: #333;\n"
"        }\n"
"\n"
"        .form-options {\n"
"            display: flex;\n"
"            justify-content: space-between;\n"
"            margin-bottom: 1.5rem;\n"
"            font-size: 0.9rem;\n"
"        }\n"
"\n"
"        .remember-me {\n"
"            display: flex;\n"
"            align-items: center;\n"
"        }\n"
"\n"
"        .remember-me input {\n"
"            margin-right: 5px;\n"
"        }\n"
"\n"
"        .forgot-password {\n"
"            color: #3498db;\n"
"            text-decoration: none;\n"
"        }\n"
"\n"
"        .forgot-password:hover {\n"
"            text-decoration: underline;\n"
"        }\n"
"\n"
"        .login-action {\n"
"            text-align: center;\n"
"        }\n"
"\n"
"        .login-action button {\n"
"            width: 100%;\n"
"            padding: 1rem;\n"
"            background: #3498db;\n"
"            color: white;\n"
"            border: none;\n"
"            border-radius: 8px;\n"
"            font-size: 1rem;\n"
"            font-weight: 600;\n"
"            cursor: pointer;\n"
"            transition: background 0.3s;\n"
"        }\n"
"\n"
"        .login-action button:hover {\n"
"            background: #2980b9;\n"
"        }\n"
"\n"
"        .signup-link {\n"
"            text-align: center;\n"
"            margin-top: 1.5rem;\n"
"            color: #666;\n"
"        }\n"
"\n"
"        .signup-link a {\n"
"            color: #3498db;\n"
"            text-decoration: none;\n"
"            font-weight: 500;\n"
"        }\n"
"\n"
"        .signup-link a:hover {\n"
"            text-decoration: underline;\n"
"        }\n"
"\n"
"        /* 注册模态框 */\n"
"        .register-modal {\n"
"            display: none;\n"
"            position: fixed;\n"
"            top: 0;\n"
"            left: 0;\n"
"            width: 100%;\n"
"            height: 100%;\n"
"            background: rgba(0,0,0,0.7);\n"
"            z-index: 2000;\n"
"            justify-content: center;\n"
"            align-items: center;\n"
"        }\n"
"\n"
"        .register-modal-content {\n"
"            background: white;\n"
"            border-radius: 15px;\n"
"            width: 90%;\n"
"            max-width: 450px;\n"
"            overflow: hidden;\n"
"            box-shadow: 0 20px 50px rgba(0,0,0,0.3);\n"
"            animation: modalAppear 0.4s ease-out;\n"
"        }\n"
"\n"
"        /* 页脚 */\n"
"        footer {\n"
"            background: #1a2530;\n"
"            color: white;\n"
"            padding: 3rem 2rem;\n"
"            text-align: center;\n"
"        }\n"
"\n"
"        .footer-content {\n"
"            max-width: 1200px;\n"
"            margin: 0 auto;\n"
"            display: grid;\n"
"            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n"
"            gap: 2rem;\n"
"            text-align: left;\n"
"        }\n"
"\n"
"        .footer-column h3 {\n"
"            font-size: 1.3rem;\n"
"            margin-bottom: 1.5rem;\n"
"            position: relative;\n"
"            padding-bottom: 10px;\n"
"        }\n"
"\n"
"        .footer-column h3:after {\n"
"            content: '';\n"
"            position: absolute;\n"
"            bottom: 0;\n"
"            left: 0;\n"
"            width: 50px;\n"
"            height: 3px;\n"
"            background: #3498db;\n"
"        }\n"
"\n"
"        .footer-column p, .footer-column a {\n"
"            color: #bbb;\n"
"            line-height: 1.8;\n"
"            margin-bottom: 0.5rem;\n"
"            display: block;\n"
"            text-decoration: none;\n"
"            transition: color 0.3s;\n"
"        }\n"
"\n"
"        .footer-column a:hover {\n"
"            color: #3498db;\n"
"        }\n"
"\n"
"        .social-links {\n"
"            display: flex;\n"
"            gap: 1rem;\n"
"            margin-top: 1.5rem;\n"
"        }\n"
"\n"
"        .social-links a {\n"
"            display: flex;\n"
"            align-items: center;\n"
"            justify-content: center;\n"
"            width: 40px;\n"
"            height: 40px;\n"
"            border-radius: 50%;\n"
"            background: rgba(255,255,255,0.1);\n"
"            color: white;\n"
"            transition: all 0.3s;\n"
"        }\n"
"\n"
"        .social-links a:hover {\n"
"            background: #3498db;\n"
"            transform: translateY(-5px);\n"
"        }\n"
"\n"
"        .copyright {\n"
"            margin-top: 3rem;\n"
"            padding-top: 1.5rem;\n"
"            border-top: 1px solid rgba(255,255,255,0.1);\n"
"            color: #999;\n"
"            font-size: 0.9rem;\n"
"        }\n"
"\n"
"        /* 响应式设计 */\n"
"        @media (max-width: 900px) {\n"
"            .hero-content h1 {\n"
"                font-size: 2.8rem;\n"
"            }\n"
"            \n"
"            .nav-links {\n"
"                display: none;\n"
"            }\n"
"            \n"
"            .auth-buttons {\n"
"                display: none;\n"
"            }\n"
"            \n"
"            .hamburger {\n"
"                display: block;\n"
"            }\n"
"            \n"
"            .mobile-menu {\n"
"                position: fixed;\n"
"                top: 70px;\n"
"                left: 0;\n"
"                width: 100%;\n"
"                background: white;\n"
"                box-shadow: 0 5px 10px rgba(0,0,0,0.1);\n"
"                padding: 1rem;\n"
"                display: none;\n"
"                z-index: 999;\n"
"            }\n"
"            \n"
"            .mobile-menu.active {\n"
"                display: block;\n"
"            }\n"
"            \n"
"            .mobile-nav-links {\n"
"                list-style: none;\n"
"                margin-bottom: 1rem;\n"
"            }\n"
"            \n"
"            .mobile-nav-links li {\n"
"                margin-bottom: 0.8rem;\n"
"            }\n"
"            \n"
"            .mobile-nav-links a {\n"
"                display: block;\n"
"                padding: 0.8rem;\n"
"                text-decoration: none;\n"
"                color: #333;\n"
"                font-weight: 500;\n"
"                border-radius: 8px;\n"
"            }\n"
"            \n"
"            .mobile-nav-links a:hover {\n"
"                background: #f0f7ff;\n"
"            }\n"
"        }\n"
"\n"
"        @media (max-width: 600px) {\n"
"            .hero-content h1 {\n"
"                font-size: 2.2rem;\n"
"            }\n"
"            \n"
"            .hero-content p {\n"
"                font-size: 1.1rem;\n"
"            }\n"
"            \n"
"            .section-title h2 {\n"
"                font-size: 2rem;\n"
"            }\n"
"        }\n"
"    </style>\n"
"</head>\n"
"<body>\n"
"    <!-- 导航栏 -->\n"
"    <nav class='navbar'>\n"
"        <div class='logo'>\n"
"            <i class='fas fa-rocket'></i>\n"
"            <span>TechSolutions</span>\n"
"        </div>\n"
"        \n"
"        <ul class='nav-links'>\n"
"            <li><a href='#home'>首页</a></li>\n"
"            <li><a href='#features'>特色功能</a></li>\n"
"            <li><a href='#services'>服务</a></li>\n"
"            <li><a href='#contact'>联系我们</a></li>\n"
"        </ul>\n"
"        \n"
"        <!-- 修改：注册按钮改为使用JavaScript打开模态框 -->\n"
"        <div class='auth-buttons' id='authButtons'>\n"
"            <button class='btn login-btn' id='openLogin'>登录</button>\n"
"            <button class='btn signup-btn' id='openRegister'>注册</button>\n"
"        </div>\n"
"        \n"
"        <div class='user-info' id='userInfo' style='display: none;'>\n"
"            <img src='https://randomuser.me/api/portraits/men/32.jpg' alt='用户头像'>\n"
"            <span id='username'>张伟</span>\n"
"        </div>\n"
"        \n"
"        <div class='hamburger' id='hamburger'>☰</div>\n"
"    </nav>\n"
"    \n"
"    <!-- 移动端菜单 -->\n"
"    <div class='mobile-menu' id='mobileMenu'>\n"
"        <ul class='mobile-nav-links'>\n"
"            <li><a href='#home'>首页</a></li>\n"
"            <li><a href='#features'>特色功能</a></li>\n"
"            <li><a href='#services'>服务</a></li>\n"
"            <li><a href='#contact'>联系我们</a></li>\n"
"        </ul>\n"
"    </div>\n"
"\n"
"    <!-- 英雄区域 -->\n"
"    <section class='hero' id='home'>\n"
"        <div class='hero-content'>\n"
"            <h1>创新解决方案，助力业务增长</h1>\n"
"            <p>提供专业的企业级数字化解决方案，帮助您的业务实现跨越式发展</p>\n"
"            <a href='#contact' class='cta-button'>立即咨询</a>\n"
"        </div>\n"
"    </section>\n"
"\n"
"    <!-- 特色功能区 -->\n"
"    <section class='features' id='features'>\n"
"        <div class='section-title'>\n"
"            <h2>核心特色</h2>\n"
"        </div>\n"
"        \n"
"        <div class='feature-grid'>\n"
"            <div class='feature-card'>\n"
"                <i class='fas fa-bolt'></i>\n"
"                <h3>快速部署</h3>\n"
"                <p>10分钟内完成系统搭建，立即开始业务运营，无需复杂配置</p>\n"
"            </div>\n"
"            <div class='feature-card'>\n"
"                <i class='fas fa-shield-alt'></i>\n"
"                <h3>安全保障</h3>\n"
"                <p>采用银行级加密技术，多重安全防护，全面保障企业数据安全</p>\n"
"            </div>\n"
"            <div class='feature-card'>\n"
"                <i class='fas fa-chart-line'></i>\n"
"                <h3>数据驱动</h3>\n"
"                <p>实时数据分析与可视化，助力科学决策，驱动业务增长</p>\n"
"            </div>\n"
"        </div>\n"
"    </section>\n"
"\n"
"    <!-- 服务介绍区 -->\n"
"    <section class='services' id='services'>\n"
"        <div class='section-title'>\n"
"            <h2>专业服务</h2>\n"
"        </div>\n"
"        \n"
"        <div class='service-grid'>\n"
"            <div class='service-card'>\n"
"                <div class='service-img' style='background-image: url(\"https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop\");'></div>\n"
"                <div class='service-content'>\n"
"                    <h3>企业数字化转型</h3>\n"
"                    <p>提供全流程数字化解决方案，覆盖业务全场景，助力企业实现智能化升级</p>\n"
"                    <a href='#' class='service-link'>了解更多 <i class='fas fa-arrow-right'></i></a>\n"
"                </div>\n"
"            </div>\n"
"            <div class='service-card'>\n"
"                <div class='service-img' style='background-image: url(\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop\");'></div>\n"
"                <div class='service-content'>\n"
"                    <h3>定制化开发</h3>\n"
"                    <p>根据企业独特需求提供专属系统开发服务，打造最适合您的解决方案</p>\n"
"                    <a href='#' class='service-link'>了解更多 <i class='fas fa-arrow-right'></i></a>\n"
"                </div>\n"
"            </div>\n"
"            <div class='service-card'>\n"
"                <div class='service-img' style='background-image: url(\"https://images.unsplash.com/photo-1550439062-609e1531270e?q=80&w=2070&auto=format&fit=crop\");'></div>\n"
"                <div class='service-content'>\n"
"                    <h3>技术支持</h3>\n"
"                    <p>7×24小时专业技术团队在线支持，快速响应解决各类技术问题</p>\n"
"                    <a href='#' class='service-link'>了解更多 <i class='fas fa-arrow-right'></i></a>\n"
"                </div>\n"
"            </div>\n"
"        </div>\n"
"    </section>\n"
"\n"
"    <!-- 联系表单区 -->\n"
"    <section class='contact' id='contact'>\n"
"        <div class='contact-container'>\n"
"            <div class='section-title'>\n"
"                <h2 style='color: white;'>联系我们</h2>\n"
"            </div>\n"
"            \n"
"            <form class='contact-form'>\n"
"                <input type='text' placeholder='姓名' required>\n"
"                <input type='email' placeholder='邮箱' required>\n"
"                <input type='tel' placeholder='电话'>\n"
"                <textarea rows='5' placeholder='留言' required></textarea>\n"
"                <button type='submit'>提交咨询</button>\n"
"            </form>\n"
"        </div>\n"
"    </section>\n"
"\n"
"    <!-- 页脚 -->\n"
"    <footer>\n"
"        <div class='footer-content'>\n"
"            <div class='footer-column'>\n"
"                <h3>关于我们</h3>\n"
"                <p>TechSolutions 致力于为企业提供专业的数字化解决方案，帮助企业在数字化时代保持竞争力。</p>\n"
"                <div class='social-links'>\n"
"                    <a href='#'><i class='fab fa-facebook-f'></i></a>\n"
"                    <a href='#'><i class='fab fa-twitter'></i></a>\n"
"                    <a href='#'><i class='fab fa-instagram'></i></a>\n"
"                    <a href='#'><i class='fab fa-linkedin-in'></i></a>\n"
"                </div>\n"
"            </div>\n"
"            \n"
"            <div class='footer-column'>\n"
"                <h3>快速链接</h3>\n"
"                <a href='#home'>首页</a>\n"
"                <a href='#features'>特色功能</a>\n"
"                <a href='#services'>服务</a>\n"
"                <a href='#contact'>联系我们</a>\n"
"                <a href='#'>隐私政策</a>\n"
"            </div>\n"
"            \n"
"            <div class='footer-column'>\n"
"                <h3>联系方式</h3>\n"
"                <p><i class='fas fa-map-marker-alt'></i> 北京市朝阳区科技园区88号</p>\n"
"                <p><i class='fas fa-phone'></i> 400-888-9999</p>\n"
"                <p><i class='fas fa-envelope'></i> contact@techsolutions.com</p>\n"
"            </div>\n"
"        </div>\n"
"        \n"
"        <div class='copyright'>\n"
"            <p>&copy; 2025 TechSolutions Inc. 保留所有权利</p>\n"
"        </div>\n"
"    </footer>\n"
"\n"
"    <!-- 登录模态框 -->\n"
"    <div class='modal' id='loginModal'>\n"
"        <div class='modal-content'>\n"
"            <div class='modal-header'>\n"
"                <h2>用户登录</h2>\n"
"                <span class='close-modal' id='closeLoginModal'>&times;</span>\n"
"            </div>\n"
"            <div class='modal-body'>\n"
"                <form id='loginForm'>\n"
"                    <div class='form-group'>\n"
"                        <label for='username'>用户名</label>\n"
"                        <input type='text' id='loginUsername' placeholder='请输入用户名' required>\n"
"                    </div>\n"
"                    \n"
"                    <div class='form-group'>\n"
"                        <label for='password'>密码</label>\n"
"                        <input type='password' id='loginPassword' placeholder='请输入密码' required>\n"
"                    </div>\n"
"                    \n"
"                    <div class='form-options'>\n"
"                        <div class='remember-me'>\n"
"                            <input type='checkbox' id='rememberMe'>\n"
"                            <label for='rememberMe'>记住我</label>\n"
"                        </div>\n"
"                        <a href='#' class='forgot-password'>忘记密码?</a>\n"
"                    </div>\n"
"                    \n"
"                    <div class='login-action'>\n"
"                        <button type='submit'>登录</button>\n"
"                    </div>\n"
"                </form>\n"
"                \n"
"                <!-- 修改：使用JavaScript打开注册模态框 -->\n"
"                <div class='signup-link'>\n"
"                    <p>还没有账号? <a href='javascript:void(0)' id='openRegisterFromLogin'>立即注册</a></p>\n"
"                </div>\n"
"            </div>\n"
"        </div>\n"
"    </div>\n"
"\n"
"    <!-- 注册模态框 -->\n"
"    <div class='register-modal' id='registerModal'>\n"
"        <div class='register-modal-content'>\n"
"            <div class='modal-header'>\n"
"                <h2>用户注册</h2>\n"
"                <span class='close-modal' id='closeRegisterModal'>&times;</span>\n"
"            </div>\n"
"            <div class='modal-body'>\n"
"                <form id='registerForm'>\n"
"                    <div class='form-group'>\n"
"                        <label for='registerUsername'>用户名</label>\n"
"                        <input type='text' id='registerUsername' placeholder='请输入用户名' required>\n"
"                    </div>\n"
"                    \n"
"                    <div class='form-group'>\n"
"                        <label for='registerPassword'>密码</label>\n"
"                        <input type='password' id='registerPassword' placeholder='请输入密码' required>\n"
"                    </div>\n"
"                    \n"
"                    <div class='form-group'>\n"
"                        <label for='confirmPassword'>确认密码</label>\n"
"                        <input type='password' id='confirmPassword' placeholder='请再次输入密码' required>\n"
"                    </div>\n"
"                    \n"
"                    <div class='login-action'>\n"
"                        <button type='submit'>注册</button>\n"
"                    </div>\n"
"                </form>\n"
"                \n"
"                <!-- 修改：使用JavaScript打开登录模态框 -->\n"
"                <div class='signup-link'>\n"
"                    <p>已有账号? <a href='javascript:void(0)' id='openLoginFromRegister'>立即登录</a></p>\n"
"                </div>\n"
"            </div>\n"
"        </div>\n"
"    </div>\n"
"\n"
"    <script>\n"
"        // DOM元素\n"
"        const hamburger = document.getElementById('hamburger');\n"
"        const mobileMenu = document.getElementById('mobileMenu');\n"
"        const openLoginBtn = document.getElementById('openLogin');\n"
"        const closeLoginModalBtn = document.getElementById('closeLoginModal');\n"
"        const loginModal = document.getElementById('loginModal');\n"
"        const loginForm = document.getElementById('loginForm');\n"
"        const authButtons = document.getElementById('authButtons');\n"
"        const userInfo = document.getElementById('userInfo');\n"
"        const usernameSpan = document.getElementById('username');\n"
"        \n"
"        // 注册相关元素\n"
"        const openRegisterBtn = document.getElementById('openRegister');\n"
"        const closeRegisterModalBtn = document.getElementById('closeRegisterModal');\n"
"        const registerModal = document.getElementById('registerModal');\n"
"        const registerForm = document.getElementById('registerForm');\n"
"        const openRegisterFromLogin = document.getElementById('openRegisterFromLogin');\n"
"        const openLoginFromRegister = document.getElementById('openLoginFromRegister');\n"
"\n"
"        // 移动端菜单切换\n"
"        hamburger.addEventListener('click', () => {\n"
"            mobileMenu.classList.toggle('active');\n"
"            hamburger.textContent = mobileMenu.classList.contains('active') ? '×' : '☰';\n"
"        });\n"
"\n"
"        // 打开登录模态框\n"
"        openLoginBtn.addEventListener('click', () => {\n"
"            loginModal.style.display = 'flex';\n"
"            registerModal.style.display = 'none';\n"
"        });\n"
"\n"
"        // 关闭登录模态框\n"
"        closeLoginModalBtn.addEventListener('click', () => {\n"
"            loginModal.style.display = 'none';\n"
"        });\n"
"\n"
"        // 打开注册模态框\n"
"        openRegisterBtn.addEventListener('click', () => {\n"
"            registerModal.style.display = 'flex';\n"
"            loginModal.style.display = 'none';\n"
"        });\n"
"\n"
"        // 关闭注册模态框\n"
"        closeRegisterModalBtn.addEventListener('click', () => {\n"
"            registerModal.style.display = 'none';\n"
"        });\n"
"\n"
"        // 从登录模态框打开注册模态框\n"
"        openRegisterFromLogin.addEventListener('click', () => {\n"
"            loginModal.style.display = 'none';\n"
"            registerModal.style.display = 'flex';\n"
"        });\n"
"\n"
"        // 从注册模态框打开登录模态框\n"
"        openLoginFromRegister.addEventListener('click', () => {\n"
"            registerModal.style.display = 'none';\n"
"            loginModal.style.display = 'flex';\n"
"        });\n"
"\n"
"        // 点击模态框外部关闭\n"
"        window.addEventListener('click', (e) => {\n"
"            if (e.target === loginModal) {\n"
"                loginModal.style.display = 'none';\n"
"            }\n"
"            if (e.target === registerModal) {\n"
"                registerModal.style.display = 'none';\n"
"            }\n"
"        });\n"
"\n"
"        // 登录表单提交\n"
"        loginForm.addEventListener('submit', (e) => {\n"
"            e.preventDefault();\n"
"            \n"
"            // 获取输入值\n"
"            const username = document.getElementById('loginUsername').value;\n"
"            \n"
"            // 模拟登录成功\n"
"            setTimeout(() => {\n"
"                // 更新UI：隐藏登录/注册按钮，显示用户信息\n"
"                authButtons.style.display = 'none';\n"
"                userInfo.style.display = 'flex';\n"
"                usernameSpan.textContent = username;\n"
"                \n"
"                // 关闭模态框\n"
"                loginModal.style.display = 'none';\n"
"                \n"
"                // 清空表单\n"
"                loginForm.reset();\n"
"                \n"
"                // 显示成功消息\n"
"                alert(`欢迎回来，${username}！`);\n"
"            }, 800);\n"
"        });\n"
"\n"
"        // 注册表单提交\n"
"        registerForm.addEventListener('submit', (e) => {\n"
"            e.preventDefault();\n"
"            \n"
"            // 获取输入值\n"
"            const username = document.getElementById('registerUsername').value;\n"
"            const password = document.getElementById('registerPassword').value;\n"
"            const confirmPassword = document.getElementById('confirmPassword').value;\n"
"            \n"
"            // 验证密码一致性\n"
"            if (password !== confirmPassword) {\n"
"                alert('两次输入的密码不一致，请重新输入！');\n"
"                return;\n"
"            }\n"
"            \n"
"            // 模拟注册成功\n"
"            setTimeout(() => {\n"
"                // 关闭模态框\n"
"                registerModal.style.display = 'none';\n"
"                \n"
"                // 清空表单\n"
"                registerForm.reset();\n"
"                \n"
"                // 显示成功消息\n"
"                alert(`注册成功，${username}！请使用您的账号登录。`);\n"
"                \n"
"                // 自动打开登录模态框\n"
"                loginModal.style.display = 'flex';\n"
"                document.getElementById('loginUsername').value = username;\n"
"            }, 800);\n"
"        });\n"
"\n"
"        // 平滑滚动\n"
"        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n"
"            anchor.addEventListener('click', function (e) {\n"
"                e.preventDefault();\n"
"                \n"
"                const targetId = this.getAttribute('href');\n"
"                const targetElement = document.querySelector(targetId);\n"
"                \n"
"                if (targetElement) {\n"
"                    window.scrollTo({\n"
"                        top: targetElement.offsetTop - 80,\n"
"                        behavior: 'smooth'\n"
"                    });\n"
"                    \n"
"                    // 关闭移动菜单\n"
"                    if (mobileMenu.classList.contains('active')) {\n"
"                        mobileMenu.classList.remove('active');\n"
"                        hamburger.textContent = '☰';\n"
"                    }\n"
"                }\n"
"            });\n"
"        });\n"
"\n"
"        // 页面滚动时导航栏效果\n"
"        window.addEventListener('scroll', () => {\n"
"            const navbar = document.querySelector('.navbar');\n"
"            if (window.scrollY > 50) {\n"
"                navbar.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';\n"
"                navbar.style.background = 'rgba(255,255,255,0.95)';\n"
"            } else {\n"
"                navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';\n"
"                navbar.style.background = '#fff';\n"
"            }\n"
"        });\n"
"    </script>\n"
"</body>\n"
"</html>";
// 上传失败页面
static const char *upload_failure_html = 
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"  <meta charset=\"UTF-8\">"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"  <title>Upload Failed</title>"
"  <style>"
"    * {"
"      box-sizing: border-box;"
"      margin: 0;"
"      padding: 0;"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
"    }"
"    body {"
"      display: flex;"
"      justify-content: center;"
"      align-items: center;"
"      min-height: 100vh;"
"      background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);"
"      padding: 20px;"
"    }"
"    .container {"
"      background-color: white;"
"      border-radius: 10px;"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);"
"      padding: 40px;"
"      width: 100%;"
"      max-width: 500px;"
"      text-align: center;"
"    }"
"    .error-icon {"
"      font-size: 72px;"
"      color: #dc3545;"
"      margin-bottom: 20px;"
"    }"
"    h1 {"
"      color: #333;"
"      margin-bottom: 20px;"
"      font-weight: 600;"
"    }"
"    p {"
"      color: #555;"
"      font-size: 18px;"
"      margin-bottom: 30px;"
"    }"
"    .btn {"
"      display: inline-block;"
"      padding: 12px 30px;"
"      background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);"
"      color: white;"
"      text-decoration: none;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      font-weight: 600;"
"      transition: transform 0.2s, box-shadow 0.2s;"
"    }"
"    .btn:hover {"
"      transform: translateY(-2px);"
"      box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);"
"    }"
"  </style>"
"</head>"
"<body>"
"  <div class=\"container\">"
"    <div class=\"error-icon\">✗</div>"
"    <h1>Upload Failed</h1>"
"    <p>%s</p>"
"    <a href=\"/files\" class=\"btn\">Try Again</a>"
"  </div>"
"</body>"
"</html>";

// 上传成功页面
static const char *upload_success_html = 
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"  <meta charset=\"UTF-8\">"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"  <title>Upload Success</title>"
"  <style>"
"    * {"
"      box-sizing: border-box;"
"      margin: 0;"
"      padding: 0;"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
"    }"
"    body {"
"      display: flex;"
"      justify-content: center;"
"      align-items: center;"
"      min-height: 100vh;"
"      background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);"
"      padding: 20px;"
"    }"
"    .container {"
"      background-color: white;"
"      border-radius: 10px;"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);"
"      padding: 40px;"
"      width: 100%;"
"      max-width: 500px;"
"      text-align: center;"
"    }"
"    .success-icon {"
"      font-size: 72px;"
"      color: #28a745;"
"      margin-bottom: 20px;"
"    }"
"    h1 {"
"      color: #333;"
"      margin-bottom: 20px;"
"      font-weight: 600;"
"    }"
"    p {"
"      color: #555;"
"      font-size: 18px;"
"      margin-bottom: 30px;"
"    }"
"    .btn {"
"      display: inline-block;"
"      padding: 12px 30px;"
"      background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);"
"      color: white;"
"      text-decoration: none;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      font-weight: 600;"
"      transition: transform 0.2s, box-shadow 0.2s;"
"    }"
"    .btn:hover {"
"      transform: translateY(-2px);"
"      box-shadow: 0 5px 15px rgba(0, 176, 155, 0.4);"
"    }"
"  </style>"
"</head>"
"<body>"
"  <div class=\"container\">"
"    <div class=\"success-icon\">✓</div>"
"    <h1>Upload Successful!</h1>"
"    <p>Your file has been uploaded successfully.</p>"
"    <a href=\"/files\" class=\"btn\">Back to Files</a>"
"  </div>"
"</body>"
"</html>";


// 修改文件上传表单，确保使用multipart/form-data编码
static const char *file_list_html_end = 
"      </tbody>"
"    </table>"
"    <form class=\"upload-form\" id=\"uploadForm\" action=\"/upload\" method=\"post\" enctype=\"multipart/form-data\">"
"      <input type=\"file\" name=\"file\" id=\"fileInput\" required>"
"      <input type=\"submit\" value=\"Upload File\">"
"    </form>"
"  </div>"
"<script>"
"  const uploadButton = document.getElementById('uploadButton');"
"  const fileInput = document.getElementById('fileInput');"
"  const uploadForm = document.getElementById('uploadForm');"
"  uploadButton.addEventListener('click', function(event) {"
"    event.preventDefault();"
"    fileInput.click(); "
"  });"

"  fileInput.addEventListener('change', function() {"
"    if (fileInput.files.length > 0) {"
"      console.log(\"选中的文件：\", fileInput.files[0].name); // 调试用，确认文件已选择"
"      uploadForm.submit(); // 提交表单"
"    } else {"
"      console.log(\"未选择文件\");"
"    }"
"  });"
"</script>"
"</body>"
"</html>";

// 文件列表页面
static const char *file_list_html_start = 
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"  <meta charset=\"UTF-8\">"
"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"  <title>File List</title>"
"  <style>"
"    * {"
"      box-sizing: border-box;"
"      margin: 0;"
"      padding: 0;"
"      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
"    }"
"    body {"
"      display: flex;"
"      justify-content: center;"
"      align-items: center;"
"      min-height: 100vh;"
"      background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);"
"      padding: 20px;"
"    }"
"    .folder-link { color: #2196F3; text-decoration: none; }"
"    .file-link { color: #333; text-decoration: none; }"
"    .parent-link { color: #FF9800; text-decoration: none; }"
"    .folder-size, .file-size { text-align: right; padding-left: 20px; }"
"    .container {"
"      background-color: white;"
"      border-radius: 10px;"
"      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);"
"      padding: 40px;"
"      width: 100%;"
"      max-width: 800px;"
"    }"
"    h1 {"
"      color: #333;"
"      margin-bottom: 20px;"
"      font-weight: 600;"
"      text-align: center;"
"    }"
"    .nav {"
"      display: flex;"
"      justify-content: center;"
"      margin-bottom: 30px;"
"    }"
"    .nav-btn {"
"      margin: 0 10px;"
"      padding: 10px 20px;"
"      background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);"
"      color: white;"
"      border: none;"
"      border-radius: 5px;"
"      font-size: 16px;"
"      font-weight: 600;"
"      cursor: pointer;"
"      text-decoration: none;"
"      transition: transform 0.2s, box-shadow 0.2s;"
"    }"
"    .nav-btn:hover {"
"      transform: translateY(-2px);"
"      box-shadow: 0 5px 15px rgba(0, 176, 155, 0.4);"
"    }"
"    .file-list {"
"      width: 100%;"
"      border-collapse: collapse;"
"      margin-top: 20px;"
"    }"
"    .file-list th, .file-list td {"
"      padding: 12px 15px;"
"      text-align: left;"
"      border-bottom: 1px solid #ddd;"
"    }"
"    .file-list th {"
"      background-color: #f5f5f5;"
"      font-weight: 600;"
"    }"
"    .file-list tr:hover {"
"      background-color: #f9f9f9;"
"    }"
"    .file-link {"
"      color: #00b09b;"
"      text-decoration: none;"
"    }"
"    .file-link:hover {"
"      text-decoration: underline;"
"    }"
"    .file-size {"
"      text-align: right;"
"    }"
"    .upload-form {"
"      margin-top: 30px;"
"      padding-top: 20px;"
"      border-top: 1px solid #eee;"
"    }"
"  </style>"
"</head>"
"<body>"
"  <div class=\"container\">"
"    <h1>File Server</h1>"
"    <div class=\"nav\">"
"      <a href=\"/\" class=\"nav-btn\">Login</a>"
"      <a href=\"/files\" class=\"nav-btn\">Files</a>"
"      <a href=\"#\" id=\"uploadButton\" class=\"nav-btn\">Upload</a>"
"    </div>"
"    <h2>File List</h2>"
"    <table class=\"file-list\">"
"      <thead>"
"        <tr>"
"          <th>Filename</th>"
"          <th class=\"file-size\">Size</th>"
"        </tr>"
"      </thead>"
"      <tbody>";

static const char *file_list_html_cab = 
"<!DOCTYPE html>\n"
"<html lang=\"en\">\n"
"<head>\n"
"    <meta charset=\"UTF-8\">\n"
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n"
"    <title>CAE File Viewer</title>\n"
"    <style>\n"
"        * {\n"
"            box-sizing: border-box;\n"
"            transition: all 0.3s ease;\n"
"        }\n"
"        body {\n"
"            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n"
"            margin: 0;\n"
"            padding: 0;\n"
"            display: flex;\n"
"            min-height: 100vh;\n"
"            background-color: #f5f7fa;\n"
"            color: #333;\n"
"            overflow: hidden;\n"
"        }\n"
"        #sidebar {\n"
"            width: 280px;\n"
"            background: linear-gradient(135deg, #2c3e50 0%, #1a2530 100%);\n"
"            color: white;\n"
"            padding: 20px;\n"
"            box-shadow: 3px 0 15px rgba(0,0,0,0.1);\n"
"            height: 100vh;\n"
"            position: relative;\n"
"            z-index: 100;\n"
"        }\n"
"        #toggle-btn {\n"
"            position: absolute;\n"
"            top: 20px;\n"
"            right: -40px;\n"
"            background: #2c3e50;\n"
"            color: white;\n"
"            border: none;\n"
"            width: 40px;\n"
"            height: 40px;\n"
"            border-radius: 0 5px 5px 0;\n"
"            cursor: pointer;\n"
"            font-size: 18px;\n"
"            display: flex;\n"
"            align-items: center;\n"
"            justify-content: center;\n"
"            box-shadow: 2px 0 5px rgba(0,0,0,0.2);\n"
"        }\n"
"        #toggle-btn:hover {\n"
"            background: #3498db;\n"
"        }\n"
"        #sidebar.collapsed {\n"
"            transform: translateX(-100%);\n"
"        }\n"
"        #sidebar h2 {\n"
"            margin-top: 0;\n"
"            padding-bottom: 15px;\n"
"            border-bottom: 1px solid rgba(255,255,255,0.2);\n"
"            text-align: center;\n"
"            font-weight: 300;\n"
"            letter-spacing: 1px;\n"
"        }\n"
"        .control-group {\n"
"            margin-bottom: 25px;\n"
"            padding: 15px;\n"
"            background: rgba(255,255,255,0.1);\n"
"            border-radius: 8px;\n"
"        }\n"
"        .control-group label {\n"
"            display: block;\n"
"            margin-bottom: 8px;\n"
"            font-weight: 300;\n"
"        }\n"
"        .control-group input,\n"
"        .control-group select {\n"
"            width: 100%;\n"
"            padding: 10px;\n"
"            border-radius: 4px;\n"
"            border: 1px solid rgba(255,255,255,0.3);\n"
"            background: rgba(0,0,0,0.2);\n"
"            color: white;\n"
"        }\n"
"        .control-group input[type=\"color\"] {\n"
"            height: 40px;\n"
"            cursor: pointer;\n"
"        }\n"
"        #content {\n"
"            flex: 1;\n"
"            padding: 30px;\n"
"            overflow: auto;\n"
"            white-space: pre-wrap;\n"
"            background-color: white;\n"
"            box-shadow: inset 0 0 20px rgba(0,0,0,0.05);\n"
"            border-radius: 10px 0 0 0;\n"
"            margin: 20px;\n"
"            max-height: calc(100vh - 40px);\n"
"        }\n"
"        /* 响应式设计 */\n"
"        @media (max-width: 768px) {\n"
"            #sidebar {\n"
"                width: 240px;\n"
"            }\n"
"        }\n"
"    </style>\n"
"</head>\n"
"<body>\n"
"    <div id=\"sidebar\">\n"
"        <h2>显示设置</h2>\n"
"        <button id=\"toggle-btn\">☰</button>\n"
"        <div class=\"control-group\">\n"
"            <label for=\"bg-color\">背景颜色</label>\n"
"            <input type=\"color\" id=\"bg-color\" value=\"#ffffff\" onchange=\"changeBgColor(this.value)\">\n"
"        </div>\n"
"        <div class=\"control-group\">\n"
"            <label for=\"bg-image\">背景图片 URL</label>\n"
"            <input type=\"text\" id=\"bg-image\" placeholder=\"https://example.com/bg.jpg\" onchange=\"changeBgImage(this.value)\">\n"
"        </div>\n"
"        <div class=\"control-group\">\n"
"            <label for=\"font-family\">字体</label>\n"
"            <select id=\"font-family\" onchange=\"changeFontFamily(this.value)\">\n"
"                <option value=\"Arial\">Arial</option>\n"
"                <option value=\"Georgia\">Georgia</option>\n"
"                <option value=\"Courier New\">Courier New</option>\n"
"                <option value=\"Segoe UI\">Segoe UI</option>\n"
"                <option value=\"Consolas\">Consolas</option>\n"
"            </select>\n"
"        </div>\n"
"        <div class=\"control-group\">\n"
"            <label for=\"font-size\">字体大小 (px)</label>\n"
"            <input type=\"number\" id=\"font-size\" min=\"10\" max=\"36\" value=\"16\" onchange=\"changeFontSize(this.value)\">\n"
"        </div>\n"
"        <div class=\"control-group\">\n"
"            <label for=\"text-color\">文字颜色</label>\n"
"            <input type=\"color\" id=\"text-color\" value=\"#000000\" onchange=\"changeTextColor(this.value)\">\n"
"        </div>\n"
"    </div>\n"
"    <div id=\"content\">%s</div>\n"
"    <script>\n"
"        const sidebar = document.getElementById('sidebar');\n"
"        const toggleBtn = document.getElementById('toggle-btn');\n"
"        \n"
"        // 切换侧边栏状态\n"
"        toggleBtn.addEventListener('click', () => {\n"
"            sidebar.classList.toggle('collapsed');\n"
"            toggleBtn.textContent = sidebar.classList.contains('collapsed') ? '☰' : '✕';\n"
"        });\n"
"        \n"
"        function changeBgColor(color) {\n"
"            document.body.style.backgroundColor = color;\n"
"        }\n"
"        \n"
"        function changeBgImage(url) {\n"
"            if(url) {\n"
"                document.body.style.backgroundImage = 'url(' + url + ')';\n"
"                document.body.style.backgroundSize = 'cover';\n"
"                document.body.style.backgroundAttachment = 'fixed';\n"
"            } else {\n"
"                document.body.style.backgroundImage = 'none';\n"
"            }\n"
"        }\n"
"        \n"
"        function changeFontFamily(font) {\n"
"            document.getElementById('content').style.fontFamily = font;\n"
"        }\n"
"        \n"
"        function changeFontSize(size) {\n"
"            if(size >= 10 && size <= 36) {\n"
"                document.getElementById('content').style.fontSize = size + 'px';\n"
"            }\n"
"        }\n"
"        \n"
"        function changeTextColor(color) {\n"
"            document.getElementById('content').style.color = color;\n"
"        }\n"
"        \n"
"        // 初始化设置\n"
"        document.addEventListener('DOMContentLoaded', () => {\n"
"            document.body.style.backgroundImage = 'none';\n"
"        });\n"
"    </script>\n"
"</body>\n"
"</html>";
#endif